<template lang="html">
  <div class="topnav">
    <input type="text" name="" value="" placeholder="搜索" ref='input'>
    <i class="i1 search1">
      <img src="../assets/img/search.png" alt=""></i>
    <i class="i2 search2" @click='clearHandle'>  <img src="../assets/img/closing.png" alt=""></i></i>
  </div>
</template>

<script>
export default {
  name:"TopNav",
  methods:{
    clearHandle(event){
      this.$refs.input.value=''
    }
  }
}
</script>

<style lang="css" scoped>
.search1 img{
  width: 0.3rem;
}
.search2 img{
  width: 0.3rem;
}
.topnav{
  color: #fff;
  width: 100%;
  height: 1.2rem;
  position: fixed;
  top: 0;
  left: 0;
  background: #7CD39C;

}
.topnav input{
  color: #fff;
  font-size: 16px;
  width: 67%;
  border-radius: 25px;
  border: 1px solid #B2E4C4;
  background: rgba(178,228,196);
  height: 0.7rem;
  position: absolute;
  top: 0.24rem;
  left: 0.7rem;
  padding-left: 0.7rem;
}
.topnav i{
  position: absolute;
  padding: 2px;
  font-size: 16px;
}
.topnav .i1{
  top: 0.36rem;
  left: 0.9rem;
}
.topnav .i2{
  top: 0.34rem;
  right: 1.2rem;
}
</style>
